<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator="/">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>订单管理</el-breadcrumb-item>
		  <el-breadcrumb-item>订单列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图 -->
		<el-card>
			<el-row>
				<el-col :span="8">
					<el-input placeholder="请输入内容" 
					v-model="queryInfo.query" clearable >
					<el-button slot="append" icon="el-icon-search"
					></el-button>
					</el-input>
				</el-col>
			</el-row> 	
			 <!-- 表格区域 -->
			   <el-table
			       :data="orderlist"
				    border stripe>
				   <el-table-column type="index"></el-table-column>
			       <el-table-column
			         label="订单编号"
					 prop="order_number"
			         width="400">
			       </el-table-column>
				   <el-table-column
				     label="订单价格"
				     prop="order_price"
				     >
				   </el-table-column>
				   <el-table-column
				     label="是否付款"
				   	 prop="pay_status"
				     >
					 <template slot-scope="scope">
						<el-tag v-if="pay_statusfuc" type="danger">未付款</el-tag>
						<el-tag v-else type="success">已付款</el-tag>
					 </template>
				   </el-table-column>
				   <el-table-column
				     label="是否发货"
				   	 prop="is_send"
				    >
				   </el-table-column>
				   <el-table-column
				     label="下单时间"
				   	 prop="update_time"
				     >
				   </el-table-column>
				   <el-table-column
				   label="操作">		
						<template slot-scope="scope">
							<el-button size="mini" 
							type="primary"
							icon="el-icon-edit"
							@click="editOrder">
							</el-button>
							<el-button size="mini" 
							type="success"
							icon="el-icon-location"
							@click="showProgressBox">
							</el-button>
							
						</template>
				   </el-table-column> 
			     </el-table>
				  <el-pagination
				       @size-change="handleSizeChange"
				       @current-change="handleCurrentChange"
				       :current-page="orderlist.pagesize"
				       :page-sizes="[2, 5, 10, 15]"
				       :page-size="10"
				       layout="total, sizes, prev, pager, next, jumper"
				       :total="total">
				     </el-pagination>
		</el-card>
		<!-- 修改信息对话框 -->
		<el-dialog
		  title="提示"
		  :visible.sync="editOrderVisble"
		  width="50%" @close="editOrderClosed">
			<el-form :model="addressForm"
			:rules="addressFormRules"
			ref="addressFormRef"
			label-width="100px">
				<el-form-item label="省市区/县" prop="address1">
					<el-cascader :options="cityData"
					v-model="addressForm.address1"></el-cascader>
				</el-form-item>
				<el-form-item label="详细地址" prop="address2">
					<el-input v-model="addressForm.address2"></el-input>
				</el-form-item>
			</el-form>	 
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="editOrderVisble = false">取 消</el-button>
		    <el-button type="primary" @click="editOrderVisble = false">确 定</el-button>
		  </span>
		</el-dialog>
		<!-- 展示物流进度对话框 -->
		<el-dialog
		  title="物流进度"
		  :visible.sync="progressVisble"
		  width="50%">
		    <el-button @click="progressVisble = false">取 消</el-button>
		    <el-button type="primary" @click="progressVisble = false">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
import cityData from './citydata.js'
	
export default {
	data() {
		return {
			queryInfo: {
				query: '',
				pagenum: 1,
				pagesize: 10
				// user_id: '',
				// pay_status: '',
				// is_send: '',
				// order_fapiao_title: '',
				// order_fapiao_company: '',
				// order_fapiao_content: '',
				// consignee_addr: ''
			},
			orderlist: [],
			total: 0,
			editOrderVisble: false,
			addressForm: {
				address1: [],
				address2: ''
			},
			addressFormRules: {
				address1: [
					{ required: true, message:
					"请选择省市区县",trigger: 'blur' }
				],
				address2: [
					{ required: true, message:
					"请填写详细地址",trigger: 'blur' }
				]
			},
			cityData,
			progressVisble: false,
			progressInfo: []
		}	
	},
	created() {
		this.getOrderlist()
	},
	methods: {
		async getOrderlist() {
			const {data: res} = await this.$http.get(
			'orders', { params: this.queryInfo })
			
			if(res.meta.status !== 200) {
			 	return this.$message.error('获取订单列表失败')
			}
			
			//console.log(res.data)
			this.orderlist = res.data.goods
			this.total = res.data.total
		},
		pay_statusfuc() {
			if(this.orderlist.pay_status === 0) {
				return true
			}
			return false
		},
		handleSizeChange(newSize) {
			this.queryInfo.pagesize = newSize
			this.getOrderlist()
		},
		handleCurrentChange(newPage) {
			this.queryInfo.pagenum = newPage
			this.getOrderlist()
		},
		editOrder() {
			this.editOrderVisble = true
		},
		editOrderClosed() {
			this.$refs.addressFormRef.resetFields()
		},
		async showProgressBox() {
			
			const { data: res} = 
			await this.$http.get('/kuaidi/1106975712662')
			
			if(res.meta.status !== 200) {
			 	return this.$message.error('获取物流进度失败')
			}
			this.progressInfo = res.data
			
			this.progressVisble = true
			console.log(this.progressInfo)
		}
		
	}
}
</script>

<style lang="less" scoped>
.el-cascader {
	width: 100%;
}
</style>
